<template>
    <div class="body">
        <div class="search-content">
            <div>
                <p @click="changSelected">{{searchClass}}<i class="iconfont icon-xiala icon" :class="isShowSelect?'open':'hide'"></i></p>
                <div class="select-box" v-show="isShowSelect" @click="changSearch">
                    <p>商家</p>
                    <p>商品</p>
                </div>
            </div>
            <input type="text" placeholder="搜索美食..." v-model="searchText" @keyup.enter="toSearch">
            <button class="claer-btn" @click="clearSearch"><i class="iconfont icon-guanbifuceng"></i></button>
            <!-- <mt-button class="search-btn" @click="toSearch">搜索</mt-button> -->
        </div>
        <div class="swipe-content">
            <mt-swipe :show-indicators="true">
                <template  v-for="(item,index) of banner">
                    <mt-swipe-item :key="index" v-if="item.status == 1">
                        <a :href="item.path">
                            <img :src="item.pic" class="banner">
                        </a>
                    </mt-swipe-item>
                </template>
            </mt-swipe>
        </div>
        <template v-if="!isShow">
            <ul>
                <li v-for="(item,key) in 6" :key="key">
                    <img src="../images/shop_back.svg" alt="back">
                </li>
            </ul>
        </template>
        <template v-else>
            <div class="class-list">
                <mt-swipe :auto="0">
                    <mt-swipe-item class="calss-page" v-for="(i,k) of class_list" :key="k">
                        <router-link :to="{path:'/classIndex',query:{id:item.id}}"  class="class-item" v-for="(item,index) of i" :key="index" :id="item.id">
                            <img :src="$store.getters.base_url+item.pic" class="class-img">
                            <p class="class-text">{{item.name}}</p>
                        </router-link>
                    </mt-swipe-item>
                </mt-swipe>
            </div>
            <ul class="store-list">
                <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false">
                    <storeList v-for="(item,key) in storeList" :key="key" :item='item' :delivery="delivery" :floorDelivery="floor_delivery"></storeList>
                </mt-loadmore>
            </ul>
        </template>
    </div>
</template>
<script>
import { getStoreList,searchShopList,classList,banner } from '../api'
// import Star from '../components/star'
import storeList from '../components/storeList'
import wxapi from '../wxapi.js';
import {wxSign} from '../api'
export default {
    data() {
        return {
            isShow:false,
            storeList:[],
            delivery:0,
            floor_delivery:[],
            searchText:"",
            class_list:[],
            isShowSelect:false,
            searchClass:'商品',
            page:1,
            limit:10,
            allLoaded:false,
            type:1,
            banner:[]
        }
    },
    created(){
        // console.log(this.$store.getters.base_url)
        this.getStoreList();
        this.getClassList();
        this.getBanner();
        // console.log(this.$store.getters.delivery);
        // console.log(this.$store.getters.delivery,'配送费');
        this.delivery = this.$store.getters.delivery.length?this.$store.getters.delivery[0][2]:0;
        const data = {
            token:this.$store.getters.token,
            url:window.location.href.split('#')[0],
            id:this.$store.getters.userInfo.id
        }
      wxSign(data).then(res=>{
        // console.log("参数获取成功")
        this.$store.commit('ADD_SUBSCRIBE',res.data.subscribe)
        const option = {
          title:"校园顺代",
          link:'http://lsxysd.jlxmall.com/Wxlogin/login?state='+this.$store.getters.userInfo.code,
          imgUrl:"http://a1.qpic.cn/psc?/V11Lh02i1ySMkl/.7XaIMpVSsi38rV5l7bhge08xIkFhiuhtDZqxNqu5oAn7xK8yIMfbqcXDHV56R.kGYyZFDW.mq0mOcnvLMCTQg!!/c&ek=1&kp=1&pt=0&bo=yADIAMgAyAARADc!&tl=1&tm=1589011200&sce=0-12-12&rf=0-18",
          desc:"专注于大学生外卖的移动外卖平台"
        }
        wxapi.wxRegister(res.data,option);
      })
    },
    methods:{
        toSearch() {this.page = 1;this.storeList = [];this.type=2;this.allLoaded = false;this.search()},
        loadBottom() {
            this.page++;
            if(this.type == 1){
                this.getStoreList();
            }else{
                this.search();
            }
            },
        changSelected(){
            this.isShowSelect = !this.isShowSelect
        },
        changSearch($event){
            this.isShowSelect = !this.isShowSelect;
            this.searchClass = $event.target.innerText;
        },
        getStoreList(){
            const data = {
                    school_id:this.$store.getters.userInfo.school_id,
                    token:this.$store.getters.token,
                    page:this.page,
                    limit:this.limit,
                    floor_id:this.$store.getters.userInfo.floor_id,
                    dormitory_id:this.$store.getters.userInfo.dormitory_id}
            getStoreList(data).then(res=>{
                // console.log(res.data.delivery)
                // this.delivery = parseFloat(res.data.delivery*1000);
                // this.floor_delivery = res.data.floor_delivery;
                // this.$store.commit("ADD_DELIVERY",{delivery:parseFloat(res.data.delivery),floor_delivery:res.data.floor_delivery,limit:res.data.limit,percentage:res.data.percentage})
                if(this.storeList.length){
                    this.storeList = this.storeList.concat(res.data.basic);
                    this.$refs.loadmore.onBottomLoaded();
                }else{
                    this.storeList = res.data.basic;
                    this.isShow = !this.isShow;
                }
                if(this.storeList.length < this.limit){
                    this.allLoaded = true;
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        getBanner(){
            const data = {
                school_id:this.$store.getters.userInfo.school_id,
                token:this.$store.getters.token,
            }
            banner(data).then(res=>{
                this.banner = res.data;
            })
        },
        search(){
            const data = {school_id:this.$store.getters.userInfo.school_id,token:this.$store.getters.token,shop_name:this.searchText,type:this.searchClass=='商家'?'1':'2',page:this.page,limit:this.limit,dormitory_id:this.$store.getters.userInfo.dormitory_id}
            searchShopList(data).then(res=>{
                // console.log(res);
                this.delivery = res.data.delivery
                if(this.storeList.length){
                    this.storeList = this.storeList.concat(res.data.basic);
                    this.$refs.loadmore.onBottomLoaded();
                }else{
                    this.storeList = res.data.basic
                }
                if(this.storeList.length < this.limit){
                    this.allLoaded = true;
                }
            })
        },
        clearSearch(){
            if(!this.searchText)return;
            this.searchText = "";
            // this.getStoreList();
        },
        getClassList(){
            const data = {
                token:this.$store.getters.token
            }
            let i = 0;
            let class_list = []
            classList(data).then(res=>{
                // console.log(res);
                for(let a in res.data){
                    // console.log((parseInt(a)+1)%10);
                    if((parseInt(a)+1)%10 == 0){
                        class_list.push(res.data[a]);
                        this.class_list.push(class_list);
                        class_list = [];
                        i++;
                    }else if(a == res.data.length - 1){
                        class_list.push(res.data[a]);
                        this.class_list.push(class_list);
                    }else{
                        class_list.push(res.data[a]);
                    }
                    // console.log(this.class_list);
                }
            })
        }
    },
    components:{
        storeList
    }
}
</script>
<style scoped>
    .body{
        height:calc(100vh - 8rem);
        overflow: scroll;
        background: #eee;
    }
    /* .item {
        margin: 0.2rem auto;
    } */
    /* .logo {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 5px;
        margin-right:1rem;
    }
    .item_text {
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height:1.5rem;
        font-size: 0.8rem;
    } */
    /* .text-content {
        width: 85%;
    } */
    /* .store_title {
        font-size: 1rem;
        font-weight: bolder;
        max-width: 70%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    } */
    /* .title_icon {
        color: #02a774;
        font-size: 1.5rem;
    }
    .subTitle_icon {
        font-size: 1rem;
        padding-right: 0.25rem;
    } */
    a {
    color: #333;
    }
    .search-content{
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* margin-top: 0.2rem; */
        position: sticky;
        background: #fff;
    }
    .search-content input{
        width: 80%;
        height: 2rem;
        border: 2px solid #ccc;
        border-radius: 1.5rem;
        padding: 0 0.5rem;
        font-size: 1rem;
        background: #f5f5f5;
    }
    .search-content input:focus{
        border: 5px solid #F1463C;
        outline: none
    }
    .open::before{
        display: inline-block;
        transform: rotateZ(-180deg);
        -webkit-transform: rotateZ(-180deg);
        -moz-transform: rotateZ(-180deg);
        transition: all 0.5s;
    }
    .hide::before{
        display: inline-block;
        transition: all 0.5s;
    }
    .search-btn{
        background: #F1463C;
        color: #fff;
        height: 2rem;
        font-size: 1rem;
        width: 4rem;
        border-radius: 1.5rem;
    }
    .class-list{
        width: 95%;
        height: 10rem;
        /* margin-bottom: 0.6rem; */
        background: #fff;
        margin:0.6rem auto;
        border-radius: 0.2rem;
        /* margin-top: 0.5rem; */
        /* border-top: 0.1rem solid #ccc; */
        padding:0.4rem 0;
    }
    .calss-page{
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .class-item{
        width: 18%;
        margin: 0 2%;
        height: 50%;
        /* border: 0.1rem solid red; */
        /* border-radius: 50%; */
        text-align: center;
    }
    .class-text{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        font-size: 0.9rem;
        font-weight: 600;
    }
    .class-img{
        width: 70%;
        height: 60%;
        border-radius: 50%;
    }
    .select-box{
        position: absolute;
        top: 3rem;
        background: #fff;
        width: 4rem;
        line-height: 2rem;
        border-radius: 0.2rem;
        text-align: center;
    }
    /* .product-list{
        width: 100%;
        white-space: nowrap;
        overflow: auto;
        border-bottom: 2px solid #ccc;
    } */
    /* .product-list div{
        width: 4rem;
        height: 6rem;
        display: inline-block;
        text-align: center;
        padding: 0.4rem;
    } */
    /* .product-img{
        width: 4rem;
        height: 4rem;
        margin: auto;
    }
    .product-price{
        color: red;
    } */
    /* .product-text{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    } */
    .claer-btn{
        background: #fff;
        border: none;
        font-weight: bolder;
        position: absolute;
        right: 5rem;
    }
    .claer-btn .iconfont{
        font-size: 1rem;
    }
    .claer-btn:focus{
        outline: none;
    }
    .class-list >>> .mint-swipe-indicator{
        width: 1rem;
        border-radius: 5px;
        opacity: 0.5;
    }
    .class-list >>> .mint-swipe-indicator.is-active{
        background: #fff;
    }
    .store-list{
        /* height: Calc(100vh - 28rem); */
        background: #fff;
        width: 95%;
        margin:0.6rem auto;
        border-radius: 0.2rem;
        /* overflow: scroll; */
    }
    .icon{
        font-size: 1.2rem;
    }
    .swipe-content{
        width: 92%;
        height: 6rem;
        border: 0.4rem solid #fff;
        margin:0.6rem auto;
        border-radius: 0.2rem;
        overflow: hidden;
    }
    .banner{
        width: 100%;
        height: 100%;
    }
</style>